<template>
  <div class="my-comments-page">
    <h2 class="title">我的评论</h2>

    <div v-if="comments.length === 0" class="empty">
      暂无评论 ~
    </div>

    <div v-for="item in comments" :key="item.id" class="comment-card">
      <div class="movie-name">{{ item.movieName }}</div>
      <div class="content">{{ item.content }}</div>

      <div class="footer">
        <span class="time">{{ formatTime(item.createTime) }}</span>
        <div class="likes">
          <i class="iconfont icon-like"></i>
          <span>{{ item.likes }}</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getMyComments } from "@/api/comment";
import dayjs from "dayjs";

const comments = ref([]);

const userId = localStorage.getItem("userId") || sessionStorage.getItem("userId");

const loadData = async () => {

  const res = await getMyComments(userId);
  console.log("【获取我的评论接口返回】=>", res); // ✅ 输出 response
  comments.value = res.data.data;
};

onMounted(loadData);

const formatTime = (time) => {
  return dayjs(time).format("YYYY-MM-DD HH:mm");
};
</script>

<style scoped>
.my-comments-page {
  padding: 20px;
  background: #fff;
  min-height: 100vh;
  color: #333;
}

.title {
  font-size: 22px;
  font-weight: bold;
  color: #a2131d;
  margin-bottom: 20px;
  border-left: 5px solid #a2131d;
  padding-left: 10px;
}

.comment-card {
  border: 1px solid #eee;
  border-left: 4px solid #a2131d;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 15px;
  background: #fafafa;
  transition: 0.3s;
}

.comment-card:hover {
  box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
}

.movie-name {
  font-size: 16px;
  font-weight: bold;
  color: #a2131d;
  margin-bottom: 6px;
}

.content {
  font-size: 15px;
  margin-bottom: 12px;
  color: #555;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time {
  font-size: 13px;
  color: #888;
}

.likes {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #a2131d;
  cursor: pointer;
}

.likes span {
  margin-left: 4px;
}

.empty {
  text-align: center;
  padding: 40px 0;
  color: #aaa;
  font-size: 15px;
}
</style>
